<template>
  <el-table
    :data="tableData"
    border
    height="400px"
    :summary-method="getSummaries"
    show-summary
    style="width: 100%; margin-top: 20px">

    <el-table-column
      prop="foodId"
      label="菜品编号"
      width="180">
    </el-table-column>

    <el-table-column
      prop="name"
      label="菜品名称">
    </el-table-column>

    <el-table-column
      prop="amount1"
      label="菜品数量">
    </el-table-column>

    <el-table-column
      prop="amount2"
      label="价格">
    </el-table-column>

    <el-table-column
      prop="amount2"
      label="合计价格">
    </el-table-column>
  </el-table>

</template>

<script>
  import axios from "axios";

  export default {
    name: "Cart",
    data() {
      return {
        tableData: [{
          orderId: '12987122',
          name: '王小虎',
          amount1: '234',
          amount2: '3.2',
          amount3: 10
        }]
      }
    },
    mounted() {

    },
    methods: {
      getSummaries(param) {
        const {columns, data} = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '总价';
            return;
          }
          const values = data.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
            sums[index] += ' 元';
          } else {
            sums[index] = 'N/A';
          }
        });

        return sums;
      }
    }
  }
</script>

<style scoped>

</style>
